<template>
    <div class="app">
        <div class="fixed">
            <div class="nav flex w1021">
                <div class="navScoket">
                    <span class="block">{{ stockName }}</span>
                    <span>{{ stockCode }}</span>
                </div>
                <div class="bgGary"></div>
                <div class="navItem" ref="navItem">
                    <!-- top下面的元素加 flex -->
                    <div
                        class="navList"
                        v-for="(item, index) in menuNav"
                        :key="item.route"
                        :class="[
              { on: routerClass == item.route, top: index > 7 },
              item.route,
            ]"
                        @click="navClick(item.route, $event)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
           <yn-com-comHot :data="hotData"></yn-com-comHot>
        </div>
        <div class="fake_nav"></div>
        <div class="main">
            <router-view></router-view>
<!--            <layer
                :title="layerTitle"
                v-show="layerVisible"
                @close="layerVisible = false"
            />-->
        </div>
    </div>
</template>
<script>
import hub, {SERVICE_EXCEPTION, TIMEOUT} from "./script/hub";
import layer from "vue-layer";
import {profile,queryStock} from "./script/api";
import {mapGetters,mapMutations} from "vuex";

const href = window.location.href;
const matchA = href.match(/#\/(\w+)/);
const routerClass = matchA ? matchA[1] : "";
//菜单
const menu = [
    {name: "公司概况", route: "company"},
    {name: "新闻公告", route: "notice"},
    {name: "经营分析", route: "businessAnalysis"},
    {name: "股东研究", route: "partner"},
    {name: "股本结构", route: "structure"},
    {name: "分红融资", route: "profit"},
    {name: "研究报告", route: "report"},
    {name: "公司高管", route: "mngChg"},
    {name: "财务分析", route: "finance"},
    {name: "核心题材", route: "coreTheme"},
    {name: "同行比较", route: "comparison"},
    {name: "关联个股", route: "relevance"},
    {name: "公司大事", route: "companyEvent"},
    {name: "操盘必读", route: "guide"},
];
// 锚点导航
const nav = {
    company: [
        {name: "公司资料"},
        {name: "发行相关"},
        {name: "证监会行业变动"},
        {name: "申万行业变动"},
    ],
    notice: [{name: "公司新闻"}, {name: "行业新闻"}, {name: "公司公告"}],
    businessAnalysis: [{name: "主营介绍"}, {name: "主营构成"}],
    partner: [
        {name: "股东人数"},
        {name: "十大流通股东"},
        {name: "十大股东"},
        {name: "机构持股汇总"},
        {name: "限售解禁"},
    ],
    structure: [
        {name: "股本结构"},
        {name: "股本结构变动"},
        {name: "限售解禁"},
    ],
    profit: [{name: "分红情况"}, {name: "增发机构获配明细"}],
    report: [{name: "公司研究"}, {name: "行业研究"}],
    fund: [{name: "募集资金来源"}, {name: "项目投资"}, {name: "关联交易"}],
    infoprofit: [
        {name: "评级统计"},
        {name: "机构预测（最近一年）"},
        {name: "预测统计"},
        {name: "预测明细"},
    ],
    mngChg: [{name: "高管列表"}, {name: "高管持股变动"}],
    finance: [{name: "财务数据"}, {name: "财务结构"}],
    coreTheme: [{name: "题材要点"}],
    comparison: [
        {name: "公司规模"},
        {name: "估值水平"},
        {name: "市场表现"},
    ],
    relevance: [
        {name: "同行业个股排名"},
        {name: "同概念个股排名"},
        {name: "同地区个股排名"},
    ],
    companyEvent: [
        {name: "大事提醒"},
        {name: "重大事项"},
        {name: "限售解禁"},
        {name: "十大股东持股变动"},
        {name: "高管持股变动"},
        {name: "龙虎榜单"},
    ],
    guide: [
        {name: "大事提醒"},
        {name: "公司概况"},
        {name: "最新指标"},
        {name: "股东分析"},
        {name: "核心题材"},
        {name: "龙虎榜"},
        {name: "公司新闻"},
        {name: "公司公告"},
    ],
};
export default {
    data() {
        return {
            menuNav: menu,
            hotData: nav[routerClass],
            routerClass: routerClass,
            layerTitle: "网络连接失败，请检查网络设置",
            layerVisible: false,
            navList: null,
            stockCode: window._stockCode,
            stockName: "",
        };
    },
    watch: {
        $route(to, from) {
            const toDepth = to.path.replace(/\//, "");
            this.hotData = nav[toDepth];
        },
       
    },
    computed: {
        ...mapGetters(["getStock"]),
    },
    mounted() {
        hub.on(SERVICE_EXCEPTION, () => {
            this.layerVisible = true;
            this.layerTitle = "服务器异常,请稍后再试";
        });
        hub.on(TIMEOUT, () => {
            this.layerVisible = true;
            this.layerTitle = "加载超时，请稍后再试";
        });
        //获取父级的所有子节点
        this.navList = this.$refs.navItem.getElementsByClassName("navList");
        this.getData();
    },
    methods: {
        ...mapMutations(['setisQuarter']),
        //路由切换
        navClick(ops) {
            this.removeSiblings();
            this.hotData = nav[ops];
            event.target.classList.add("on");
            this.$router.push({path: "/" + ops});
        }, //删除所有select
        removeSiblings() {
            for (var i = 0; i < this.navList.length; i++) {
                this.navList[i].classList.remove("on");
            }
        }, //获取数据
        async getData() {
            await queryStock().then(res=>{

                this.stockName = res.data.stockName;
                this.setisQuarter(res.data.listSectorName == '科创板' ? 'quarter' : '');

            }).catch(err=>{
            });

        },
    },
};
</script>
<style lang="scss"  scoped>
    body{
        width: 100vw;
    }
    // .main{
    //     width:2022px;
    //     overflow: hidden;
    // }
</style>
